<?php echo $header; ?><?php echo $column_left; ?>
<div id="content">
  <div id="app">
    <div class="page-header">
      <div class="container-fluid">
        <div class="pull-right">
          <button type="submit" form="form-slideshow" data-toggle="tooltip" title="<?php echo $button_save; ?>" class="btn btn-primary" @click="save()"><i class="fa fa-save"></i></button>
          <a href="<?php echo $cancel; ?>" data-toggle="tooltip" title="<?php echo $button_cancel; ?>" class="btn btn-default"><i class="fa fa-reply"></i></a></div>
        <h1><?php echo $heading_title; ?></h1>
        <ul class="breadcrumb">
          <?php foreach ($breadcrumbs as $breadcrumb) { ?>
          <li><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a></li>
          <?php } ?>
        </ul>
      </div>
    </div>
    <div class="container-fluid">
      <div class="alert alert-info" v-if="message">{{ message }}</div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title"><i class="fa fa-pencil"></i> <?php echo $text_edit; ?></h3>
        </div>
        <div class="panel-body">
          <form class="form-horizontal">
            <fieldset>
              <div class="form-group">
                <label class="col-sm-2 control-label" for="input-title"><?php echo $entry_name; ?></label>
                <div class="col-sm-10">
                  <input type="text" v-model="module.name" placeholder="<?php echo $entry_name; ?>" class="form-control" />
                  <div v-if="errors.name" class="text-danger">{{ errors.name }}</div>
                </div>
              </div>

              <div class="form-group">
                <label class="col-sm-2 control-label" for="input-title"><?php echo $entry_status; ?></label>
                <div class="col-sm-10">
                  <select v-model="module.status" class="form-control">
                    <option v-bind:value="0"><?php echo $text_disabled; ?></option>
                    <option v-bind:value="1"><?php echo $text_enabled; ?></option>
                  </select>
                </div>
              </div>

            </fieldset>

            <table v-if="module.items" class="table table-responsive table-bordered">
              <thead>
                <tr>
                  <td><?php echo $column_image; ?></td>
                  <td><?php echo $column_title; ?></td>
                  <td><?php echo $column_text; ?></td>
                  <td></td>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in module.items">
                  <td class="text-center">
                    <a href="#" v-bind:id="'thumb-image-' + (index)" class="img-thumbnail" v-on:click.prevent="selectImage(index)"><img v-bind:src="imageSrc(item.image)" /></a>
                    <input type="hidden" v-bind:id="'input-image-' + (index)" />
                  </td>
                  <td>
                    <input type="text" v-model="item.title" placeholder="<?php echo $entry_title; ?>" class="form-control" />
                  </td>
                  <td>
                    <input type="text" v-model="item.text" placeholder="<?php echo $entry_text; ?>" class="form-control" />
                  </td>
                  <td class="text-center"><button data-toggle="tooltip" type="button" title="<?php echo $button_remove; ?>" class="btn btn-danger" @click="module.items.splice(index, 1)"><i class="fa fa-times" aria-hidden="true"></i></button></td>
                </tr>
              </tbody>
            </table>
            <div class="text-right clearfix" v-if='module.items.length < 4'>
              <button type='button' class="btn btn-primary pull-right" @click="addItem()"><i class="fa fa-plus" aria-hidden="true"></i> <?php echo $button_add; ?></button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
<?php echo $footer; ?>
<script type="text/javascript"><!--
  var app = new Vue({
    el: '#app',
    data: {
      message: '',
      errors: [],
      module: {
        name: '',
        status: 0,
        items: [],
      },
    },
    created: function () {
      this.loadData();
    },
    methods: {
      selectImage: function (imageIndex) {
        var vm = this;

        $('#modal-image').remove();

        $.ajax({
          url: 'index.php?route=common/filemanager&token=<?php echo $token; ?>&target=input-image-' + imageIndex + '&thumb=' + 'thumb-image-' + imageIndex,
          dataType: 'html',
          beforeSend: function() {
            $('#button-image i').replaceWith('<i class="fa fa-circle-o-notch fa-spin"></i>');
            $('#button-image').prop('disabled', true);
          },
          complete: function() {
            $('#button-image i').replaceWith('<i class="fa fa-upload"></i>');
            $('#button-image').prop('disabled', false);
          },
          success: function(html) {
            $('body').append('<div id="modal-image" class="modal">' + html + '</div>');
            $('#modal-image').modal('show');
            $('#modal-image').css('zIndex', '9999');
          }
        });

        $(document).delegate('a.thumbnail', 'click', function () {
          vm.module.items[imageIndex].image = $('#input-image-' + imageIndex).val();
          $('#modal-image').remove();
          $(document).undelegate('a.thumbnail', 'click');
        });
      },

      imageSrc: function (image) {
        return 'index.php?route=extension/module/<?php echo $module_code; ?>/thumb&token=<?php echo $token; ?>&image=' + image;
      },

      addItem: function () {
        this.module.items.push({image: '', url: '', title: '', text: ''});
      },

      loadData: function () {
        this.$http.get('index.php?route=extension/module/<?php echo $module_code; ?>/load&module_id=<?php echo $module_id; ?>&token=<?php echo $token; ?>').then(function (data) {
          var json = data.body;
          if (json['data']) {
            this.module = json['data'];
          }
        });
      },

      save: function () {
        this.message = '';
        this.errors = [];

        <?php if ($module_id): ?>
        var url = 'index.php?route=extension/module/<?php echo $module_code; ?>/save&module_id=<?php echo $module_id;?>&token=<?php echo $token; ?>';
        <?php else: ?>
        var url = 'index.php?route=extension/module/<?php echo $module_code; ?>/save&token=<?php echo $token; ?>';
        <?php endif ?>

        this.$http.post(url, {module: this.module}).then(function (data) {
          var json = data.body;

          if (json['status'] === 0) {
            this.message = json['message'];
            this.errors = json['data'];
            return;
          }

          this.message = json['message'];

          <?php if (!$module_id): ?>
          window.history.back();
          <?php endif; ?>
        });
      }
    }
  })
//--></script>
